import React, {Component} from 'react';

class Event_handling extends Component
{
    a=1000

    render()
    {
        return (
            <div>
                <input/>
                <button onClick={()=>{
                    //this的指向为类内的函数以及数值
                    console.log(this)
                    console.log("add")
                }}>add</button>
                {/*在调用非标签内的函数时不要加括号*/}
                {/*标签内的函数可以使用.bind(this)来强制转换this指向*/}
                <button onClick={this.handleClick.bind(this)}>add2</button>
                <button onClick={this.handleClick3}>add3</button>
                <button onClick={()=>{
                    this.handleClick4()
                }}>add4</button>
            </div>
        );
    }
    handleClick(){
        console.log(this);
        //this的指向为undefined
        console.log("loy")
    }
    handleClick3=(evt)=>{
        console.log(evt.target);
        console.log(this)
        //this在此处的效果和标签内的内联函数一致，指向Event_handling实例
        console.log("齐天大圣到此一游！");
    }
    handleClick4=()=>{
        console.log(this)
        //this的指向同handleClick3
        console.log("齐天大圣到此一游！");
    }
}
/*改变this指向的方法
* call
*   改变this的指向 自动执行函数
* apply
*   改变this的指向 自动执行函数
* bind
*   改变this的指向 不会自动执行，要手动执行
* */
//evt。target拿到事件源
//react不会真正的绑定时间到一个具体的标签元素上，而是采用事件代理模式
export default Event_handling ;
